<template>
  <div class="content">
    <div class="header_box">
      <div class="header_left">营销管理</div>
      <div class="header_right">
        <el-form :inline="true" :model="searchForm" class="form_box"></el-form>
      </div>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{ background: '#fafbfc', color: '#bbbcc3' }"
      max-height="500"
      @selection-change="handleSelectionChange"
    >
    </el-table>
    <div class="page_box">
      <el-pagination
        v-model:current-page="searchForm.pageNo"
        v-model:page-size="searchForm.pageSize"
        :page-sizes="[10, 50, 100, 150]"
        :small="small"
        :disabled="false"
        :background="true"
        layout="sizes, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
  <el-dialog :title="dialogTitle" v-model="repairVis" width="500">
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="repairVis = false">取消</el-button>
        <el-button type="primary" @click="confirmRepair">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { defineOptions, ref, onBeforeMount } from "vue";
import * as marketingApi from "../../../api/project3/finance/finance.js";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import confirm from "../../../utils/ElMessageUtils.js";

defineOptions({ name: "marketingManagement" });

const tableData = ref([]);

const searchForm = ref({
  pageNo: 1,
  pageSize: 10,
  order: "",
  account: "",
});

let total = ref(0);
let repairVis = ref(false);
const dialogTitle = ref("编辑营销");

const init = async () => {
  const res = await marketingApi.page(searchForm.value);
  const { records } = res;
  tableData.value = records;
  total.value = res.total;
};

const search = async () => {
  await init();
};

const approve = async (row) => {
  // 批准逻辑
  ElMessage.success(`订单 ${row.order} 已批准`);
};

const reject = async (row) => {
  // 拒绝逻辑
  ElMessage.error(`订单 ${row.order} 已拒绝`);
};

const viewDetails = (row) => {
  // 查看详情逻辑
  console.log("查看详情:", row);
};

onBeforeMount(() => {
  init();
});
</script>

<style lang="less" scoped>
.header_right {
  background-color: #ffffff;
  justify-content: flex-end;
  border-radius: 0px 15px 0px 0px;
}
:deep(.form_box) {
  width: 80%;
  height: 40%;
  margin: 0px;
  display: flex;
  justify-content: flex-end;
}
.header_left {
  border-radius: 15px 0px 0px 0px;
  font-weight: 700;
}
.clickable {
  color: #409eff;
  cursor: pointer;
}
</style>